import React, { useEffect, useState, useReducer } from 'react'
import { Table, Button, Space, Modal, Input, Rate } from 'antd'
import { getGoodsList, addGoodsItem } from '@/api/goods'
import UpLoad from '@/components/upload/UpLoad'
import { connect } from 'umi'

type Props = {
    goods: any,
    dispatch: any
}

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        render: (text: any, info: any, index: number) => <span>{index + 1}</span>
    },
    { title: '装备名称', dataIndex: 'name', key: 'name' },
    {
        title: '图标',
        dataIndex: 'icon',
        key: 'icon',
        render: (text: any) => <img style={{
            width: "45px",
            height: "45px"
        }} src={text} alt="" />
    },
    {
        title: '星级',
        dataIndex: 'star',
        key: 'star'
    },
    {
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: () => <React.Fragment>
            <Space>
                <Button type="primary">编辑</Button>
                <Button type="primary" danger>删除</Button>
            </Space>
        </React.Fragment>
    }
];

// 分页事件晚一步
function GoodsList({ goods, dispatch }: Props) {
    const [pageInfo, setPageInfo] = useState({
        "pagenum": 1,
        "pagesize": 5
    })
    const [list, setList] = useState([])
    const [pagination, setPagination] = useState({
        total: 0,
        pageSize: pageInfo.pagesize,
        pageSizeOptions: [5, 8, 10, 15],
        showQuickJumper: true
    })

    const [isModalVisible, setIsModalVisible] = useState(false)
    const [value, setValue] = useState(0)

    const { name, detail } = goods

    const desc = [1, 2, 3];

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        addGoodsItem(goods).then(res => {
            setIsModalVisible(false)
            dispatch({ type: "goods/setProps", prop: "none" })
            setValue(0)
            init()
        })
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 改变星级
    const handleChange = (value: any) => {
        dispatch({ type: "goods/setProps", prop: "star", val: value })
        setValue(value);
    };
    // 初始化
    function init() {
        getGoodsList(pageInfo).then((res: any) => {
            let list = res.data
            list.forEach((item: any) => {
                item.key = String(Math.random()).slice(1, 9)
            })
            setList(list)
            // 修改pagination
            setPagination({
                ...pagination,
                total: res.total,
                pageSize: pageInfo.pagesize
            })
        })
    }
    // 分页
    function change(page: any) {
        setPageInfo({
            pagenum: page.current,
            pagesize: page.pageSize
        })
        init()
    }
    useEffect(() => {
        init()
    }, [pageInfo])
    return (
        <div className='p20'>
            <div className='context_card'>
                {/* 添加弹框 */}
                <Button type="primary" onClick={showModal}>
                    添加装备
                </Button>
                <Modal title="添加装备" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <div className='banner_flex mt15'>
                        <span>
                            物品名称
                        </span>
                        <Input value={name} onChange={(ev) => {
                            dispatch({ type: "goods/setProps", prop: "name", val: ev.target.value })
                        }}/>
                    </div>
                    <div className='banner_flex mt15'>
                        <span>
                            物品图标
                        </span>
                        <UpLoad url="/api/upload/item"  type="goods/setProps"/>
                    </div>
                    <div className='banner_flex mt15'>
                        <span>
                            星级
                        </span>
                        <Rate onChange={handleChange} value = { value } count={3} />
                        <span style={{
                            lineHeight: "36px"
                        }} className="ant-rate-text">{ value? desc[value - 1]: 0 }</span>
                    </div>
                    <div className='banner_flex mt15'>
                        <span>
                            物品简介
                        </span>
                        <Input value={goods.desc} onChange={(ev) => {
                            dispatch({ type: "goods/setProps", prop: "desc", val: ev.target.value })
                        }}/>
                    </div>
                    <div className='banner_flex mt15'>
                        <span>
                            物品详情
                        </span>
                        <Input value={detail} onChange={(ev) => {
                            dispatch({ type: "goods/setProps", prop: "detail", val: ev.target.value })
                        }}/>
                    </div>
                </Modal>
                {/* 表格 */}
                <Table
                    columns={columns}
                    // 分页配置
                    pagination={pagination}
                    onChange={change}
                    expandable={{
                        expandedRowRender: record => <p style={{ margin: 0 }}>
                            {record.detail}
                        </p>
                    }}
                    dataSource={list}
                />
            </div>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    const { goods } = state
    return {
        goods
    }
}

export default connect(mapStateToProps)(GoodsList)